Create a Custom Color Palette

Create a custom color palette for visualizations in the solution experience.

Overview

As an administrator, you can create custom color palettes that users can apply to the visualizations in the solution experience. Color palettes allow you to define the colors of visual items such as bars, bubbles, and lines. Each color palette contains a set of 14 colors. The order of colors in the palette dictate the color that is used for visual items as more values are added to the visual.

Users can change the color palette for a visual by clicking the Change colors button on the Visual Actions menu. For more information, see Change Colors.

The custom color palettes that you create in the studio experience appear at the top of the list in the Colors panel once you've published your project changes to production.

Create a custom palette

1. In a project, on the navigation bar, click Model > Settings > Color Palettes.
2. Click Create Custom Palette in the upper-right corner.
3. In the Create Custom Palette dialog, type a display name and description for the color palette, and then click Create.
4. Pick colors and build the color palette in the Configure tab.
   
   1. Select the color you want to define in the Colors list.
   2. Click the Key color box to define the primary color tone using the color picker. For more information, see Using the color picker.
      Additional shades will automatically be generated for your key color. These shades will be used for visual marks such as dots and text as well as fill colors for shapes and backgrounds.
   3. Optional: Change the shades for the key color.

      Note:  

      • We strongly advise against changing the shades. Adjusting the automatically generated shades can result in clashing color combinations for visual items.
      • If you're making changes to the shades, you should only adjust the saturation and lightness of the shade. Avoid adjusting its hue. For more information, see Best practices for creating color palettes.
      1. Click Show Shades to see the shade options.
      2. Click the Shade color box to define the shade color using the color picker.
   4. Optional: Change the color order. The color order affects the priority in which colors are used, with Color 1 used the most.
      1. Click Reorder at the top of the Colors list.
      2. Drag and drop the colors to the desired position.
      3. When finished click Save at the top of the Colors list.

5. Make the color palette available in the solution experience by turning on the Visible in Analytics toggle in the Basic Information tab.

   Note:  

   • The Visible in Analytics toggle must be turned on before you can preview your color palette.
   • You can also change this setting on the main Color Palettes page.
6. To test your color palette in the solution experience, click Preview Solution on the navigation bar.
7. Optional: Make the color palette the default color palette for all users on the main Color Palettes page. For more information, see Change the default color palette.

8. When finished, publish your project to production. For instructions, see Publish Project Changes.

Using the color picker

Use the color picker to select and apply colors to your palette.

There are multiple ways you can refine your color selection in the color picker:

1. Color field: Select the color by clicking and dragging the circle in the color field. Use the hue slider to adjust the colors that appear.
2. Hue slider: Click and drag the slider left or right to adjust the colors that appear in the color field.
3. Eyedropper: Use the eyedropper to select colors from any object or image on your screen. For example, use the eyedropper to extract colors from an image of your company logo. Click the eyedropper and drag the tool outside the browser window to select a color from anywhere on the screen.
4. Color value: Type the value for a specific color based on the selected color system.

Color system: Change the color system that is used. Choose between RGB, HSL, or HEX.

Change the default color palette

Select the color palette that is automatically applied to new visualizations for all users.

1. In a project, on the navigation bar, click Model > Settings > Color Palettes.
2. Select the default color palette in the Default palette list.
   

3. When finished, publish your project to production. For instructions, see Publish Project Changes.

Best practices for creating color palettes

Use the following tips and best practices as guidance when creating your color palettes.

• The easiest way to refine your color choices is by experimenting with the hue, saturation, and lightness values. You can adjust these values by using the HSL (Hue, Saturation, Lightness) color system in the color picker.
• Adjust the hue, saturation, and lightness values to generate distinctiveness between the key colors in your palette:
  • Adjust the hue (color family such as Yellow or Blue) to make colors look different.
  • Adjust the saturation and lightness to change the intensity of the color.
    • Avoid highly saturated colors that will overwhelm other visual items.
    • Avoid colors with low saturation and high luminosity. These colors will be hard to see against a light background.
• Keep in mind that a darker shade (Shade 1) will automatically be generated when selecting the key color. Try to leave a bit of room for the key color to get more intense.
• To make it easier for users to distinguish the different colors in your palette, we recommend that you use a range of hues in your palette instead of making subtle changes to saturation or lightness. Colors using similar hues with different saturation and lightness may be perceived by viewers as shades of the same color rather than distinct colors.
• Remember we don't perceive colors in the same way! We recommend that you use an online color palette checker to ensure your color palette is inclusive and friendly for those with color deficiencies.